<template>
  <div class="widget">
    <p class="widget-title">{{ content.display_name }}</p>
    <el-button class="none-type" icon="el-icon-plus" @click="showDialog">选择文件</el-button>
    <p class="widget-hint">{{ this.content.defaultValue }}</p>
    <el-dialog title=" " :visible.sync="showFile">
      <el-table ref="fileList" :data="fileList" :stripe="true" tyle="width: 100%" @row-dblclick="goPath" highlight-current-row>
        <el-table-column prop="name" :show-overflow-tooltip="true" label="名称">
          <template slot-scope="scope" class="clearfix">
            <i :class="[
              'file-icon',
              handleIcon(scope.row.dir, scope.row.suffix),
            ]"></i>
            <span v-if="scope.row.dir" :class="[
              'file-name',
              handleClass(scope.row.dir, scope.row.suffix),
            ]">{{ scope.row.name }}</span>
            <span @click="preview(scope.row)" v-else :class="[
              'file-name',
              handleClass(scope.row.dir, scope.row.suffix),
            ]">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="文件大小" prop="size">
          <template slot-scope="{ row }">{{
              formatFileSize(row)
          }}</template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="修改时间" prop="modifyTime" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitReject">确认</el-button>
        <el-button class="none-type" @click="showFile = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { zipFormat, mediaFormat } from "@/utils/maps";
import { listByPage } from "@/api/file";

export default {
  props: {},
  data() {
    return {
      content: {},
      showFile: false,
      fileList: [],
      orgId: ''
    };
  },
  methods: {
    async list (url, type, bizId) {
      let info = await this.$myInfo(this);
      let uid = info && info.org_id;
      this.orgId = uid
      console.log(url)
      if (!url) {
        return;
      }
      this.path = url;
      
      if (url.search(bizId) == '-1') {
        return
      }
      let relativePath = url.split(bizId)[1]
      // if (!relativePath) return
      let queryParams = {
        bizId,
        relativePath,
        tenantId: uid,
        type,
        showHidden: false,
        page: this.page,
        pageSize: this.pageSize,
      };
      this.loading = true;
      let res = await listByPage(queryParams);
      this.fileList = res.data.files;
      console.log(this.fileList)
      this.total = res.data.total
      this.loading = false;
      this.$emit('fileDetail',  res.data.files)
    },
    async goPath (file) {
      if (file.dir) {
        this.$emit("filePath", file.path);
      } else {
        this.$emit("filePath", false);
        return false;
      }
      if (!file.isDel) {
        this.page = 1
      }
      // let url = file.path;
      this.path = file.path.replace(
        `/onebrain/${this.orgId}/workspace/`,
        ""
      );
      this.loading = true;


      let bizId = this.bizId || this.content.canvas_id
      let relativePath = this.path.replace(bizId, '')
      let queryParams = {
        bizId,
        relativePath,
        tenantId: this.orgId,
        type: 'workspace',
        showHidden: false,
        page: this.page,
        pageSize: this.pageSize,
      };
      let res = await listByPage(queryParams);
      this.fileList = res.data.files;
      this.total = res.data.total
      let path = {
        name: file.name,
        dir: file.dir,
        path: file.path,
      };
      if (path.name) {
        this.paths.push(path);
      }
      this.loading = false;
      this.$emit('fileDetail',  res.data.files)
    },
    preview(row) {
      let replacePath = `/onebrain/${this.orgId}/workspace/${this.content.canvas_id}`
      this.content.defaultValue = row.path.replace(replacePath, '.')
      this.showFile = false
    },
    handleIcon (isDir, suffix) {
      if (isDir) return "dir";
      if (zipFormat[suffix]) return "zip";
      if (mediaFormat[suffix] && mediaFormat[suffix] == "pic") return "pic";
      if (mediaFormat[suffix] && mediaFormat[suffix] == "video") return "video";
      if (mediaFormat[suffix] && mediaFormat[suffix] == "voice") return "voice";
      return "text";
    },
    handleClass (isDir, suffix) {
      // if ( isDir ) return 'dir'
      if (zipFormat[suffix]) return "cannot-click";
    },
    formatFileSize ({ size, dir }) {
      if (dir) {
        return '-'
      }
      if (size < 1024) {
        return size + "B";
      } else if (size < 1024 * 1024) {
        let temp = size / 1024;
        temp = temp.toFixed(2);
        return temp + "KB";
      } else if (size < 1024 * 1024 * 1024) {
        let temp = size / (1024 * 1024);
        temp = temp.toFixed(2);
        return temp + "MB";
      } else {
        let temp = size / (1024 * 1024 * 1024);
        temp = temp.toFixed(2);
        return temp + "GB";
      }
    },
    showDialog() {
      this.showFile = true
      // let canvas_id = this.$route.query.canvas_id
      let canvas_id = this.content.canvas_id
      // this.content.defaultValue || 
      console.log(123)
      console.log(this.content)
      console.log(canvas_id)
      this.list(canvas_id, 'workspace', canvas_id)
    },
    submitReject() {

    }
  },
  mounted() {

  }
};
</script>

<style lang="less" scoped>
</style>
